<template>
	<view class="content">

		<view class="fontSize-28 width-full" v-if="backgroundImage!=''">
			<view class="paddingLeft-32 paddingRight-32 box-sizing" :style="{
			  backgroundImage: `url('${backgroundImage}')`,
			  backgroundSize: '100% 100%',
			  height:'412rpx'
			}">
				<view class="flex box-sizing paddingLeft-24">
					<view class="color-white header-text marginLeft-18" style="width: 80%">
						{{ dataList.title1 }}
					</view>
				</view>
				<view class="header-box">
					<view class="header-img">
						<image :src="dataList.dianzhan_image" mode="" style="width: 100%; height: 100%;"
							v-if="dataList.avatar == ''"></image>
						<image :src="dataList.avatar" mode="" style="width: 88rpx; height: 88rpx;border-radius: 50%;">
						</image>
					</view>
					<view class="flex items-center">
						<view class="" style="width: 50%;">
							<view class="fontSize-60 weight-700 text-center color-51D580">
								{{ dataList.days }}
							</view>
							<view class="color-999 fontSize-28 text-center">
								累计学习(天)
							</view>
						</view>
						<view class="" style="width: 50%;">
							<view class="fontSize-60 color-51D580 weight-700 text-center">
								{{ dataList.total_count }}
							</view>
							<view class="color-999 fontSize-28 text-center">
								累计刷词量
							</view>
						</view>
					</view>
					<view class="marginTop-36">
						<view class="flex items-center space-between">
							<view class="flex items-center space-around" style="width: 24%" @click="toNewWord(1)">
								<view class="">
									<view class="weight-700 color-333 fontSize-44 text-center">
										{{ dataList.know_count }}
									</view>
									<view class="color-666 fontSize-28 text-center marginTop-10">
										熟词本
									</view>
								</view>
								<view class="" style="width: 2rpx; height: 62rpx; background-color: #e6e6e6">
								</view>
							</view>
							<view class="flex items-center space-around" style="width: 24%" @click="toNewWord(0)">
								<view class="">
									<view class="weight-700 color-333 fontSize-44 text-center"
										style="font-family: DIN-Bold">
										{{ dataList.unknow_count }}
									</view>
									<view class="color-666 fontSize-28 text-center marginTop-10">
										生词本
									</view>
								</view>
								<view class="" style="width: 2rpx; height: 62rpx; background-color: #e6e6e6">
								</view>
							</view>
							<view class="flex items-center space-around" style="width: 24%" @click="toNewWord(2)">
								<view class="">
									<view class="weight-700 color-333 fontSize-44 text-center">
										{{ dataList.blur_count }}
									</view>
									<view class="color-666 fontSize-28 text-center marginTop-10">
										模糊词本
									</view>
								</view>
								<view class="" style="width: 2rpx; height: 62rpx; background-color: #e6e6e6">
								</view>
							</view>
							<view class="flex items-center space-around" style="width: 24%" @click="bookChange">
								<view class="">
									<view class="weight-700 color-333 fontSize-44 text-center">
										{{ dataList.booknum }}
									</view>
									<view class="color-666 fontSize-28 text-center marginTop-10">
										学习书本
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 按钮区 -->
				<view class="main-section">
					<view class="box-sizing width-full flex items-center flex-wrap space-between">
						<view class="wrapItem borderRadius-30" v-for="(item, index) in title3" :key="index"
							@click="btnClick(item)" :style="getWrapItemStyle(item)">

							<view class="fontSize-36 weight-700">
								<span v-html="item.t_big"></span>
							</view>
							<view class="flex space-between marginTop-10">
								<view class="fontSize-26 width-130" :style="getColorStyle(item)">
									<span v-html="item.t_small"></span>
								</view>
								<image :src="item.t_image" mode="" style="width: 148rpx; height: 132rpx;"
									class="btn-img"></image>
							</view>


						</view>
					</view>
				</view>
				<!-- 百霸故事汇 -->
				<div class="topic-block colorBj-fff borderRadius-30" @click="goStore()">
					<view class="title">
						<image :src="dataList.b_image1" mode=""
							style="width: 40rpx; height: 40rpx; margin-right: 16rpx;"></image>
						<view class="fontSize-32 weight-700 color-333">
							{{ dataList.b_title1 }}
						</view>
						<view class="fontSize-26 marginLeft-16">
							{{ dataList.b_title1_1 }}
						</view>
					</view>
					<view class="flex space-between  box-sizing marginTop-40 marginBottom-20 items-center">
						<view class="flex items-center">
							<image :src="dataList.avatar" mode=""
								style="width: 56rpx; height: 56rpx; border-radius: 50%">
							</image>
							<view class="fontSize-28 marginLeft-16">
								{{ dataList.title2 }}
							</view>
						</view>
						<view class="look-btn">
							去看看
						</view>

					</view>
				</div>
				<!-- 陆续退出 -->
				<div class="topic-block colorBj-fff borderRadius-30 marginTop-30">
					<view class="title">
						<image :src="dataList.b_image2" mode=""
							style="width: 40rpx; height: 40rpx; margin-right: 16rpx;"></image>
						<view class="fontSize-28 weight-700 color-333">
							{{ dataList.b_title2 }}
						</view>
					</view>
					<view
						class="flex space-between items-center marginTop-60 marginBottom-20 paddingLeft-20 paddingRight-20 box-sizing">
						<view class="" style="width: 24%;" v-for="(item,index) in dataList.title4" :key='index'
							@click='toPage(item.t_big)'>
							<view class="" style="margin: 0 auto;width: 60rpx;height: 60rpx;">
								<image :src="item.t_image" mode="" style="width: 100%; height: 100%;"></image>
							</view>
							<view class="marginTop-16 text-center">
								{{item.t_big}}
							</view>
						</view>

					</view>
				</div>

				<!-- <up-gap :height="tabBarHeight + 'px'" bgColor="#f1f1f1" /> -->

			</view>

			<!-- 			<view class="flex space-between">
				<span style="color:#909399;">{{title1}}</span><span><up-icon @click="search" name="search"
						size="24"></up-icon></span>
			</view>
			<view class="marginBottom-30 fontSize-36 weight-700 marginTop-20" style="color:#909399;">
				{{title2}}
			</view>
			<view class="width-full flex box-sizing paddingLeft-20 paddingRight-20 marginBottom-50">
				<up-image mode="widthFix" :show-loading="true" :src="headInfo.pic" width="160rpx"
					height="180rpx"></up-image>
				<view class="flex column box-sizing paddingLeft-30 height-180 flex-center" style="flex: 1;">
					<view class="flex space-between marginBottom-30">
						<view class="fontSize-28 weight-700">
							{{headInfo.bookname}}
						</view>
						<view @click="bookChange" class="fontSize-28 color-409EFF">
							选择词书
						</view>
					</view>
					<view class="marginBottom-30">
						<up-line-progress activeColor="#6dacf9" :showText="false" :percentage="headInfo.percentage"
							height="8"></up-line-progress>
					</view>
					<view class="flex space-between">
						<view class="fontSize-28">
							当前进度：{{headInfo.percentage}}%
						</view>
						<view class="fontSize-28">
							总词量：{{headInfo.num}}
						</view>
					</view>
				</view>
			</view>
			<view class="flex column">
				<view class="marginBottom-30">
					<up-tabs :current="defaultTab" :scrollable="false" :list="tabs" @click="tabsClick"></up-tabs>
				</view>
				<view class="flex space-around height-100">
					<view class="flex column items-center">
						<view class="marginBottom-30">
							已刷单词
						</view>
						<view class="fontSize-50 weight-700">
							{{defaultData.word_num}}
						</view>
					</view>
					<view class="flex column items-center">
						<view class="marginBottom-30">
							生单词
						</view>
						<view class="fontSize-50 weight-700">
							{{defaultData.unknow_num}}
						</view>
					</view>
					<view class="flex column items-center">
						<view class="marginBottom-30">
							刷词用时(分钟)
						</view>
						<view class="fontSize-50 weight-700">
							{{defaultData.times}}
						</view>
					</view>
				</view>
			</view> -->
			<up-popup round="5" :show="phoneShow" @close="close" @open="open">
				<view class="popupBox">
					<view class="flex">
						<up-image shape="circle" mode="widthFix" :src="logo" width="80rpx" height="80rpx"></up-image>
						<view class="flex column marginLeft-20 width-full">
							<view class="fontSize-28 weight-700"> 百霸智育 </view>
							<view class="fontSize-26"> 登录后查看学习数据信息 </view>
						</view>
					</view>
					<view class="marginTop-30">
						<view class="">
							<up-input maxlength="11" placeholder="请输入手机号" border="surround"
								v-model="loginForm.mobile"></up-input>
						</view>
						<view class="marginTop-30">
							<up-input placeholder="请输入您的验证码" v-model="loginForm.code">
								<template #suffix>
									<up-code ref="uCodeRef" @change="codeChange" seconds="60"
										changeText="X秒重新获取"></up-code>
									<up-button @tap="getCode" :text="tips" type="primary" size="mini"></up-button>
								</template>
							</up-input>
						</view>
						<view class="marginTop-30 flex items-center">
							<up-checkbox :customStyle="{ marginBottom: '8px' }" label="" shape="circle" size="16px"
								usedAlone v-model:checked="loginForm.isRadiu">
							</up-checkbox>
							<view class="">
								您是否已阅读并同意<span>《用户协议》</span>和<span>《隐私政策》</span>
							</view>
						</view>
					</view>
					<view class="width-full box-sizing btns flex column items-center flex-center">
						<view class="marginTop-30 flex flex-center" style="width: 80vw">
							<up-button @click="bindPhone" size="normal" type="primary" text="登录"></up-button>
						</view>
					</view>
				</view>
			</up-popup>
		</view>

		<up-popup :show="editShow" mode='center' bgColor='transparent'>
			<view class="popup_bg" :style="{
		        backgroundImage: `url('${wxtsimage}')`,
		        backgroundSize: '100% 100%',
		      }">
				<view class="popup_title">
					{{msg_title}}
				</view>
				<view class="popup_pro">
					{{msg}}
				</view>
				<view class="popup_btn" @click="closePopup">
					知道了
				</view>
			</view>
		</up-popup>
		<up-popup :show="wordShow" mode='center' bgColor='transparent'>
			<view class="popup_bg2">
				<view class="color-white fontSize-52 text-center marginTop-25">
					温馨提示
				</view>
				<view class="text-center marginTop-100 fontSize-36 color-333">
					您好，请先刷单词，给单词安个家，然后才能到家里找到它们！
				</view>
				<view class="btn" @click="wordShow=false">
					关闭
				</view>

			</view>
		</up-popup>
	</view>


</template>

<script setup>
	import {
		onReady,
		onShow,
		onLoad
	} from "@dcloudio/uni-app";
	import {
		inject,
		ref,
		onMounted,
		computed,
		reactive
	} from "vue";
	import image from "@/static/logo.png";
	import uCharts from "@/node_modules/@qiun/ucharts/u-charts.js";
	const sendSmsApi = inject("sendSms");
	const loginMobileApi = inject("loginMobile");
	const getMaxmemoryApi = inject("getMaxmemory");
	const newindexApi = inject("newindex");
	const indexLineApi = inject("indexLine");
const loading=ref(true)
	const logo = ref(image);
	const info = ref({});
	const tips = ref("");
	const title1 = ref("");
	const title2 = ref("");
	const title4 = ref("");
	const title3 = ref([]);
	const uCodeRef = ref(null);
	const backgroundImage = ref('');
	const wordShow = ref(false)
	const phoneShow = ref(false);
	const editShow = ref(false);
	const msg = ref("");

	const loginForm = ref({
		mobile: "",
		code: "",
		isRadiu: false,
	});
	const headInfo = ref({
		bookname: "",
		bookId: "",
		num: null,
		percentage: null,
		pic: "",
		wbook_id: null,
	});
	const tabs = ref([{
			name: "今日",
		},
		{
			name: "本周",
		},
		{
			name: "累计",
		},
	]);

	const tabsData = ref({
		today: {},
		week: {},
		all: {},
	});
	const defaultData = ref({});
	const userA = ref("");
	const defaultTab = ref(0);
	const tl = ref(["today", "week", "all"]);

	info.value = uni.getStorageSync("userInfo");
	// 点刷单词操作
	const startStudyApi = inject("startStudy");
	const index = inject("index");

	const getIndex = () => {
		index().then((res) => {
			loading.value=false
			console.log(res, "ssssssss");
			headInfo.value["bookname"] = res.book["bookname"];
			headInfo.value["bookId"] = res.book["bookId"];
			headInfo.value["num"] = res.book["num"];
			headInfo.value["percentage"] = res.book["percentage"];
			headInfo.value["pic"] = res.book["pic"];
			headInfo.value["wbook_id"] = res.book["wbook_id"];
			tabsData.value["today"] = res.today;
			tabsData.value["week"] = res.week;
			tabsData.value["all"] = res.all;
			defaultData.value = res[tl.value[defaultTab.value]];
		});
	};
	const chartData = ref({});
	const wxtsimage = ref('')
	const msg_title = ref('')

	const tabBarHeight = ref(0);
	onMounted(() => {
		const systemInfo = uni.getSystemInfoSync();
		// 底部Tab栏高度 = 屏幕高度 - 窗口高度
		tabBarHeight.value = systemInfo.screenHeight - systemInfo.windowHeight;
	});

	const dataList = ref([]);
	const chartList = ref({});
	onShow(() => {
		getIndex();
		newindexApi().then((res) => {
			console.log(res);
			dataList.value = res;
			title1.value = res.title1;
			title2.value = res.title2;
			title3.value = res.title3;
			title4.value = res.title4;
			backgroundImage.value = res.bg_image
			wxtsimage.value = res.wxtsimage
		});

		indexLineApi().then((res) => {
			console.log(res);
			chartList.value = res;
		});
	});
	const splitText = (text) => {
		if (!text) return "";
		const parts = text.split("#");
		return parts
			.map((part, index) => {
				if (index === 0) {
					return `<span style="font-size: 32rpx; color: #0CCE51; font-weight:500;">${part}</span>`;
				} else {
					return `<span font-size: 30rpx;>${part}</span>`;
				}
			})
			.join("");
	};

	const closePopup = () => {
		editShow.value = false
	};
	// const goClick = () => {
	// 	uni.navigateTo({
	// 		url: '/pages/memory/memoryList'
	// 	})
	// };

	const tabsClick = (e) => {
		if (e.index == defaultTab.value) return;
		defaultTab.value = e.index;
		defaultData.value = tabsData.value[tl.value[defaultTab.value]];
		console.log(e.index, defaultData.value, tl.value[defaultTab.value]);
	};
	const goStore = (e) => {
		uni.navigateTo({
			url: '/pagesA/index/storeList'
		})
	};

	const btnClick = (item) => {
		// console.log(item.t_big)
		msg_title.value = item.msg_title
		//刷单词
		msg.value = item.msg;
		if (item.name == "shua") {
			console.log(Object.keys(info.value).length, "info.value");
			// return
			if (Object.keys(info.value).length > 0) {

				startStudyApi({
					wbook_id: headInfo.value["wbook_id"],
				}).then((res) => {
					console.log(res, "oooooooo");
					let firstBrushingWords2 = uni.getStorageSync("firstBrushingWords2")||false;
					console.log(firstBrushingWords2, 456)
					if (firstBrushingWords2 == false) {
						uni.navigateTo({
							url: "/pagesA/reciteWords/brushWordsFirst?wbook_id=" +
								headInfo.value["wbook_id"] +
								"&times_id=" +
								res.times_id,
						});
					} else {
						uni.navigateTo({
							url: "/pages/index/brushWords?wbook_id=" +
								headInfo.value["wbook_id"] +
								"&times_id=" +
								res.times_id,
						});
					}

				});
			} else {
				uni.navigateTo({
					url: "/pages/login/login",
				});
			}
		} else if (item.name == "ji") {
			//记单词
			if (Object.keys(info.value).length > 0) {
				getMaxmemory();
			} else {
				uni.navigateTo({
					url: "/pages/login/login",
				});
			}
		} else if (item.name == "lian") {
			uni.navigateTo({
				url: "/pages/index/practiceWoeds/home",
			});
		} else if (item.name == "cha") {
			if (dataList.value.know_count + dataList.value.unknow_count + dataList.value.blur_count == 0) {
				wordShow.value = true
			} else {
				uni.navigateTo({
					url: "/pages/index/search",
				});
			}

		} else if (item.name == "ce") {
			// editShow.value = true
			uni.navigateTo({
				url: "/pages/index/test/testWords",
			});
		} else if (item.name == "yong") {
			editShow.value = true;
		} else if (item.name == "jiyili") {
			if (dataList.value.know_count + dataList.value.unknow_count + dataList.value.blur_count == 0) {
				wordShow.value = true
			} else {
				uni.navigateTo({
					url: "/pages/index/memoryMax",
				});
			}
		}
	};
	const getWrapItemStyle = (item) => {
		switch (item.name) {
			case "shua":
				return {
					backgroundColor: "#FFF0D0"
				};
			case "ji":
				return {
					backgroundColor: "#FFEBDB"
				};
			case "cha":
				return {
					backgroundColor: "#DDECFF"
				};
			case "jiyili":
				return {
					backgroundColor: "#FFE4E0"
				};
			default:
				return {};
		}
	};
	const getColorStyle = (item) => {
		switch (item.name) {
			case "shua":
				return {
					color: '#DA9D03'
				};
			case "ji":
				return {
					color: '#DC823B'
				};
			case "cha":
				return {
					color: '#4E91EA'
				};
			case "jiyili":
				return {
					color: '#F27176'
				};
			default:
				return {};
		}
	};

	const cancel = () => {
		editShow.value = false;
	};
	//1-跳转刷单词页  2-跳转未记录记忆上限  3-跳转记单词 4-无电话跳转获取电话页
	const getMaxmemory = () => {
		getMaxmemoryApi().then((r) => {
			console.log(r, 319);
			let res = r[0];
			if (res.zt == "1") {
				if (dataList.value.know_count + dataList.value.unknow_count + dataList.value.blur_count == 0) {
					wordShow.value = true
				} else {
					uni.navigateTo({
						url: "/pages/index/brushWords?wbook_id=" +
							headInfo.value["wbook_id"]

					});
				}

			} else if (res.zt == "2") {
				if (dataList.value.know_count + dataList.value.unknow_count + dataList.value.blur_count == 0) {
					wordShow.value = true
				} else {
					uni.navigateTo({
						url: "/pages/index/memoryMax",
					});
				}

			} else if (res.zt == "3") {
				console.log(res.mobile);
				if (res.mobile && res.mobile.length > 0) {
					const reciteWordsShow=uni.getStorageSync('reciteWordsShow')||false
					if(!reciteWordsShow){
						uni.navigateTo({
							url: "/pagesA/memory/memoryGuide",
						});
					}else{
						uni.navigateTo({
							url:'/pagesA/memory/partition'
						})
					}
					
				}
			} else if (res.zt == "4") {
				uni.navigateTo({
					url: "/pages/index/bindPhone",
				});
			}
		});
	};
	const change = (index) => {
		if (tabbarCurrent.value == index) return;
		tabbarCurrent.value = index;
		console.log(index);
	};
	const close = () => {
		phoneShow.value = false;
		loginForm.value.mobile = "";
		loginForm.value.code = "";
		loginForm.value.isRadiu = false;
	};
	const open = () => {
		phoneShow.value = true;
	};
	const codeChange = (text) => {
		tips.value = text;
	};
	const getCode = () => {
		const mobileRegex = /^1[3-9]\d{9}$/;
		if (!loginForm.value.mobile || !mobileRegex.test(loginForm.value.mobile)) {
			return uni.showToast({
				title: "手机号格式错误！",
				icon: "none",
			});
		}
		console.log(uCodeRef, uCodeRef.value, "sssssssssssss");
		if (uCodeRef.value.canGetCode) {
			// 模拟向后端请求验证码
			uni.showLoading({
				title: "正在获取验证码",
			});
			sendSmsApi({
				mobile: loginForm.value.mobile,
			}).then((res) => {
				uni.showToast({
					title: "验证码已发送！",
					icon: "none",
				});
				console.log(res, "asdas");
				uni.hideLoading();
				uCodeRef.value.start();
				if (res && res.is_fs == 0) {
					loginForm.value.code = res.code;
				}
			});
		} else {
			// uni.$u.toast('倒计时结束后再发送');
		}
	};
	// 登录
	// const bindPhone1 = () => {
	// 	uni.navigateTo({
	// 		url: "/pages/index/memoryWordGuide",
	// 	});
	// };
	const loginMobile = () => {
		loginMobileApi({
			mobile: loginForm.value.mobile,
			code: loginForm.value.code,
		}).then((es) => {
			console.log('es1111111111111111111', es)
			uni.setStorageSync("userInfo", es.data);
			uni.setStorageSync("token", es.token);
			loginForm.value.mobile = "";
			loginForm.value.code = "";
			loginForm.value.isRadiu = false;
			phoneShow.value = false;
			// bindPhone1();


		});
	};
	const bindPhone = () => {
		const mobileRegex = /^1[3-9]\d{9}$/;
		if (!loginForm.value.mobile || loginForm.value.mobile == "") {
			return uni.showToast({
				title: "请先填写手机号！",
				icon: "none",
			});
		}

		if (!loginForm.value.mobile || !mobileRegex.test(loginForm.value.mobile)) {
			return uni.showToast({
				title: "手机号格式错误！",
				icon: "none",
			});
		}
		if (!loginForm.value.code || loginForm.value.code == "") {
			return uni.showToast({
				title: "请先填写验证码！",
				icon: "none",
			});
		}
		if (!loginForm.value.isRadiu) {
			uni.showModal({
				title: "提示",
				content: `您是否已阅读并同意《用户协议》和《隐私政策》？`,
				success: function(res) {
					if (res.confirm) {
						loginForm.value.isRadiu = true;
						loginMobile();
					} else if (res.cancel) {
						console.log("用户点击取消");
					}
				},
			});
		} else {
			loginMobile();
		}
	};
	const search = () => {
		if (dataList.value.know_count + dataList.value.unknow_count + dataList.value.blur_count == 0) {
			wordShow.value = true
		} else {
			uni.navigateTo({
				url: "/pages/index/search",
			});
		}
	};
	const bookChange = () => {
		uni.navigateTo({
			url: "/pages/index/book",
		});
	};
	//跳转生词、熟词本
	const toNewWord = (t) => {
		if (t == 1) {
			uni.navigateTo({
				url: '/pages/index/wordBank'
			})
		} else {
			uni.navigateTo({
				url: '/pages/index/newWordBook?type=' + t
			})
		}

	}

	//跳转阅读理解/完形填空/语篇填空/大小作文	
	const toPage = (item) => {
		uni.navigateTo({
			url: '/pagesA/index/readBlock?item=' + item
		})
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f1f1f1 !important;
	}

	.content {
		// height: calc(100vh + 100%);
		height: 1550rpx;
		background-color: #f1f1f1;
	}

	.wrapItem {
		// width: calc(50% - 12rpx);
		width: 332rpx;
		height: 204rpx;
		margin-right: 22rpx;
		margin-bottom: 22rpx;
		padding: 20rpx 20rpx 12rpx 30rpx;
		box-sizing: border-box;
		position: relative;

		&:nth-child(2n) {
			margin-right: 0;
		}

		.btn-img {
			position: absolute;
			right: 0;
			bottom: 0;
		}
	}

	// .btns{
	// 	width: 80vw;
	// }
	.btnBox {
		margin-bottom: 30rpx;
		// &:last-child{
		//     margin-top: 30rpx;
		// }
	}

	.popupBox {
		width: 100vw;
		padding: 50rpx 30rpx 30rpx;
		background-color: #fff;
		box-sizing: border-box;

		.btns {
			padding-bottom: calc(50rpx);
		}
	}


	.header-box {
		position: relative;
		width: 686rpx;
		height: 338rpx;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 30rpx;
		padding: 44rpx 30rpx 30rpx 42rpx; //上右下左
		box-sizing: border-box;
		top: 212rpx;
		left: 50%;
		transform: translateX(-50%);

		.header-img {
			width: 686rpx;
			height: 100rpx;
			position: absolute;
			left: 50%;
			top: -50rpx;
			transform: translateX(-50%);
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.header-text {
		font-weight: 500;
		font-size: 28rpx;
		color: #ffffff;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.header-number-bj {
		position: relative;
	}

	.topic-block {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}

	.header-number {
		font-size: 60rpx;
		line-height: 60rpx;
		color: #31d36b;
		font-weight: bold;
		font-family: DIN, DIN;
	}

	.study-day {
		color: #777;
	}



	.title {
		display: flex;
		align-items: center;
	}

	.look-btn {
		width: 124rpx;
		height: 56rpx;
		border: 1px solid #51D580;
		color: #51D580;
		border-radius: 30rpx;
		font-size: 28rpx;
		text-align: center;
		line-height: 56rpx;
	}

	.main-section {
		margin-top: 235rpx;
	}



	// ::v-deep .u-divider {
	// 	margin: 20rpx 0;
	// }

	::v-deep .u-modal {
		z-index: 999;
	}


	// view,
	// button,
	// text,
	// image {
	// 	border: 1px solid #f00;
	// }
	.popup_bg2 {
		width: 610rpx;
		height: 500rpx;
		background: url('https://bbsf.oss-cn-shanghai.aliyuncs.com/english/icons/remind.png') no-repeat;
		background-size: 100% 100%;
		overflow: hidden;
		z-index: 99999999999999999;
		padding: 0 50rpx;
		box-sizing: border-box;

		.btn {
			width: 252rpx;
			height: 92rpx;
			background: #4ed27d;
			border-radius: 74rpx;
			text-align: center;
			line-height: 93rpx;
			color: #fff;
			margin: 0 auto;
			margin-top: 50rpx;
		}

	}

	.popup_bg {
		width: 610rpx;
		height: 500rpx;

		.popup_title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 52rpx;
			color: #FFFFFF;
			text-align: center;
			padding-top: 10rpx;
		}

		.popup_pro {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 40rpx;
			color: #999999;
			line-height: 47rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			width: 220rpx;
			margin: 80rpx auto 0;
		}

		.popup_btn {
			width: 526rpx;
			height: 92rpx;
			background: #40D577;
			border-radius: 74rpx 74rpx 74rpx 74rpx;
			text-align: center;
			line-height: 92rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF;
			font-style: normal;
			text-transform: none;
			margin: 120rpx auto 0;
		}


	}


	.bottom-img {
		// position: absolute;
		// bottom: 150rpx;
		// left: 50%;
		// transform: translateX(-50%);
		margin: 0 auto;
		margin-top: 10rpx;
	}
</style>
<script>
	export default {
		options: {
			styleIsolation: 'shared',
		},
	}
</script>